<script setup>
import { reactive } from 'vue'
import { ElLoading } from 'element-plus'
import HelloWorld from './components/HelloWorld.vue'
import { pipeline } from '@huggingface/transformers'

const form = reactive({
  zh: '',
  en: '',
})

const handleSubmit = async () => {
  let classifier = await pipeline('sentiment-analysis');
  let reviewer = await pipeline('sentiment-analysis', 'Xenova/bert-base-multilingual-uncased-sentiment');

  let results = await classifier(form.zh); // 情感分析 "POSITIVE" "NEGATIVE" [{label: 'POSITIVE', score: 0.9998208284378052}]
  let results2 = await reviewer(form.zh); // 情感打分 1-5 [{label: '5 stars', score: 0.8167929649353027}]

  // 根据情感分析和情感打分的结果返回当前文字所对应的情感
  let sentiment = results[0].label;
  let rating = results2[0].label.split(' ')[0]; // 提取星级评分

  let emotionalResponse;
  if (sentiment === 'POSITIVE' && rating >= 4) {
    emotionalResponse = '乐观的';
  } else if (sentiment === 'NEGATIVE' || rating <= 2) {
    emotionalResponse = '负面的';
  } else {
    emotionalResponse = '中立的';
  }

  console.log(emotionalResponse)
}

</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    <el-form ref="formRef" :model="form" label-width="auto" @submit.prevent="handleSubmit"> 
        <el-form-item label="Activity zh" prop="zh">
          <el-input v-model="form.zh" />
        </el-form-item>
        <el-form-item label="Activity en" prop="en">
          <el-input v-model="form.en" disabled />
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="handleSubmit">Query</el-button>
      </el-form-item>
    </el-form>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>